<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>购物车</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit|ie-comp">

    <meta name="mobile-agent" content="format=html5; url=https://m.hua.com/">
    <link rel="canonical" href="https://www.hua.com/" />


    <script type="text/javascript" src="/home/CheckAgent"></script>
    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <link type="text/css" rel="stylesheet" href="//img02.hua.com/pc/assets/css/common.css?1">
    <link type="text/css" rel="stylesheet" href="https://img02.hua.com/pc/assets/css/public_2020.css">
    <link type="text/css" rel="stylesheet" href="//img02.hua.com/pc/assets/css/mbar.css" />
    <link type="text/css" rel="stylesheet" href="https://img02.hua.com/pc/css/home_common.css?729">

    <link rel="stylesheet" type="text/css" href="//img02.hua.com/pc/css/home.css?0724">
    <link rel="stylesheet" type="text/css" href="//img02.hua.com/pc/css/invalid-ie.css?12">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="images/style.css" rel="stylesheet" type="text/css" />
    <style>
        .festival-item-price {
            color: #C26137;
        }

        #navi .navi-nav li {
            margin: 0 14px;
        }
    </style>


    <!--[if lt IE 9]>
    <script src="//img02.hua.com/pc/assets/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">

            <h1 class="text-center text-info">
                荔 子 网 上 花 店
            </h1>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="gouwuche.html">我的购物车</a>
                </li>
                <li>
                    <a href="wodedingdan.html">我的订单</a>
                </li>
                <li>
                    <a href="wodexinxi.html">我的信息</a>
                </li>

            </ul>

        </div>
    <!-- 订单列表 -->



    <div class="cart-panel">
        <img src="https://img02.hua.com/pc/Images/2017/ysh-top-banner.jpg" >

        <div class="row clearfix" style="margin:5px!important;margin:3px;">
            <div class="col-md-12 column">
                <h2 class="text-center text-info">
                    购  物  车
                </h2>
                <table class="table table-hover col-sm-12" border="1">
                    <thead>
                    <tr>
                        <th class="btn-info btn-lg ">
                            顾客名
                        </th>
                        <th class="btn-info btn-lg ">
                            商品名称
                        </th>
                        <th class="btn-info btn-lg ">
                            价格
                        </th>
                        <th class="btn-info btn-lg " width="55">
                            数量
                        </th>
                        <th class="btn-info btn-lg ">
                            类别
                        </th>
                        <th class="btn-info btn-lg "  width="55">
                            删除
                        </th>
                    </tr>
                    </thead>

                    <tbody id="goods">
                    <c:forEach items="${gouwuches}" var="gouwuche">
                        <tr>
                            <td class="btn-lg" align="center">${gouwuche.gukename}</td>
                            <td class="btn-lg" align="center">${gouwuche.mingcheng}</td> <!--单个商品的价格 -->
                            <td class="btn-lg" align="center">${gouwuche.jiage}</td>
                            <td class="btn-lg" align="center">
                                <form class="form-horizontal" role="form" action="jia.html" method="post">
                                    <input name="Mingcheng" type="hidden" class="form-control"  value=${gouwuche.mingcheng} />
                                    <input type="submit"  name="JiaXiaoliang" class="form-control" value='＋' id="Jiaxiaoliang" />
                                </form>

                                <input id="text" type="text" size='5' value='${gouwuche.xiaoliang}' readonly='readonly' />

                                <form class="form-horizontal" role="form" action="jian.html" method="post">
                                    <input name="Mingcheng" type="hidden" class="form-control"  value=${gouwuche.mingcheng} />
                                    <input type="submit" name="JianXiaoliang" class="form-control" value='—' id="Jianxiaoliang"  />
                                </form>
                            </td>
                            <td class="btn-lg" align="center">${gouwuche.zhonglei}</td>
                            <td class="btn-lg" align="center">
                                <form class="form-horizontal" role="form" action="del.html" method="post">
                                    <input name="Mingcheng" type="hidden" class="form-control"  value=${gouwuche.mingcheng} />
                                    <input type="submit" name="DelXiaoliang" class="form-control" value='×' id="Delxiaoliang" />
                                </form>
                            </td>

                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="set-bar">
        <div class="set-info">
            <a class="back" href="<c:url value="/index.html"/>" style="width:90px;"><span class="ico ico-back"></span>继续挑选</a>
            <div class="set-stat">
                应付金额:
                <div class="price">
                    <span class="price-sign">&yen;</span>
                    <span class="price-num" id="totalMoney">
                        ${zongjia}
                    </span>
                </div>
            </div>
        </div>
        <%--        <button class="btn btn-primary btn-lg form" type="button" id="jiesuan" onclick="javascript:window.location.href='/JK18study/jsp/dingdan.jsp'">去结算</button>--%>
        <a href="<c:url value="/dingdan.html"/>"><input type="button" value="去结算" class="btn btn-primary btn-lg form" ></a>
    </div>


</div>
</div>
</body>
<script type="text/javascript">

    //增加减少数量，用n正负1来表示点击了加减按钮
    function change(btn,n){
        //获取数量的三个input对象
        var inputs = btn.parentNode.getElementsByTagName("input");
        //获取原来的数量
        var amount = parseInt(inputs[1].value);
        //当amount=1时不能再点击"-"符号
        //用n<0来表示点击了减button
        if(amount<=1 && n<0){
            return;
        }
        //根据加减来改变数量
        inputs[1].value = amount + n;
        //将改变后的数量值赋值给amount
        amount = inputs[1].value;
        //获取表格中的行
        var tr = btn.parentNode.parentNode;
        //获取所有的列
        var tds = tr.getElementsByTagName("td");
        //获取单价
        var price = parseFloat(tds[1].innerHTML);
        //总价=单价*数量
        var m = price * amount;
        //将总价赋值给相应的位置
        tds[3].innerHTML = m;
        //调用total方法，求总计
        total();
    }


    function total(){
        var tbody=document.getElementById("goods");
        var trs=tbody.getElementsByTagName("tr");
        var sum=0;
        for(var i=0;i<trs.length;i++){
            var tds=trs[i].getElementsByTagName("td");
            var m=tds[3].innerHTML;
            sum += parseFloat(m);
        }
        var total=document.getElementById("total");
        total.innerHTML = sum;
    }
    function del(i){
        var tr=i.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
        //tr.remove(tr);
        total();
    }
</script>
</html>